<template>
	<el-upload :headers="headers" :on-change="handleChange" :fileSize="fileSize" ref="fileUpload" :action="uploadUrl" :auto-upload="autoUpload" :multiple="multiple" :limit="limit" :data="uploadData" :on-exceed="handleExceed" :before-upload="beforeUpload" :on-success="fileSuccess" :on-error="fileError" :file-list="fileList" :with-credentials="withCredentials" :accept="accept">
		<el-button slot="trigger" size="small" type="success" plain>选取文件</el-button>
		<div slot="tip" class="el-upload__tip">{{ tipText }}</div>
	</el-upload>
</template>
  
  <script>
export default {
	props: {
		uploadUrl: {
			type: String,
			default: ''
		},
		autoUpload: {
			type: Boolean,
			default: false,
		},
		multiple: {
			type: Boolean,
			default: false,
		},
		limit: {
			type: Number,
			default: 1,
		},
		uploadData: {
			type: Object,
			default: () => { },
		},

		fileSuccess: {
			type: Function,
			default: () => { },
		},
		fileError: {
			type: Function,
			default: () => { },
		},
		fileList: {
			type: Array,
			default: () => [],
		},
		withCredentials: {
			type: Boolean,
			default: true,
		},
		accept: {
			type: String,
			default: '.xls,.xlsx',
		},
		buttonText: {
			type: String,
			default: '选取文件',
		},
		tipText: {
			type: String,
			default: '支持excel文件, 单文件大小不超过50MB',
		},
		fileSize: {
			type: Number,
			default: 50
		}
	},
	data() {
		return {
			headers: {
				Toekn: sessionStorage.getItem('token') || ''
			}
		};
	},
	methods: {
		beforeUpload(file) {
			let count = 0
			for (var i = 0; i < file.name.length; i++) {
				if (file.name[i] == '.') {
					count++
				}
			}
			if (file.size > 1024 * 1024 * this.fileSize) {
				this.$message({
					type: 'warning',
					message: '上传文件最大限制50MB'
				})
				return false
			} else if (count != 1) {
				this.$message({
					type: 'warning',
					message: '文件名称不规范，包含多个"."'
				})
				return false
			} else {
				return true
			}
		},
		// 文件超出个数限制时的钩子
		handleExceed(files, fileList) {
			this.$message.warning(`当前限制选择 ${this.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${fileList.length} 个文件`)
		},
		handleChange(file, fileList) {
			for (let i = 0; i < fileList.length; i++) {
				if ((fileList[i].name).indexOf(';') !== -1) {
					this.$message.warning(fileList[i].name + '文件名中不应包含分号 " ; " , 请选择修改文件名重新上传')
					fileList.splice(i, 1)
				}
			}
			setTimeout(() => {
				for (let i = 0; i < fileList.length; i++) {
					if ((fileList[i].name.split('.').length - 1) !== 1) {
						this.$message.warning(fileList[i].name + '文件名不规范, 不应包含多个 " . " , 请选择修改文件名重新上传')
						fileList.splice(i, 1)
					}
				}
			}, 100)
			setTimeout(() => {
				if (fileList.findIndex(f => f.name === file.name) !== fileList.findLastIndex(f => f.name === file.name)) {
					this.$message.warning(file.name + '文件已存在')
					fileList.pop()
				}
			}, 150)
			const fileSuffix = file.name.substring(file.name.lastIndexOf('.')).toLowerCase();
			const whiteList = this.accept.split(',')

			if (whiteList.indexOf(fileSuffix) === -1) {
				this.$message.error('请检查文件的上传类型')
				this.$refs.fileUpload.clearFiles()
			}
			const isLtMB = file.size / 1024 / 1024 < this.fileSize;

			if (!isLtMB) {
				this.$message.error('上传文件大小不能超过 1000MB')
				this.$refs.fileUpload.clearFiles()
			}
			this.filesList = fileList;
            this.$emit('GetFileList', fileList)
		},
	},
};
  </script>
  
  <style scoped>
.upload-demo {
	/* 自定义样式可在这里添加 */
}
</style>
  